<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>嘉然今晚吃什么</title>
        
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            min-height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            background:#ffffff;
        }
        .content{
            position:absolute;
            width:237px;
            height:50px;
            background:#808080;
            z-index:99;
            border-radius:10px;
            color:azure;
            text-align:center;
            line-height:50px;
            user-select:none;
        }
        .box {
            position: absolute;
            width: 140px;
            height: 40px;
            background: #EEAD0E;
            z-index: 99;
            top: calc(50% + 75px);
            border-radius: 10px;
            color: #ffffff;
            left: 40%;
            line-height: 40px;
            user-select: none;
            text-align:center;
            cursor: pointer;
        }
        .design {
            position: absolute;
            width: 140px;
            height: 40px;
            background: #EEAD0E;
            z-index: 99;
            top: calc(50% + 75px);
            border-radius: 10px;
            color: #ffffff;
            left: 52%;
            text-align: center;
            line-height: 40px;
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="back"></div>
    <div class="content">今天恰什么</div>
    <div class="box" onclick="stop = !stop">吃什么捏</div>
    <div class="design" onclick="alertInput()">自定义今天吃什么捏</div>

</body>
<script>
   
    var stop = true
    var back = document.querySelector('.back')
    var content = document.querySelector('.content')
    var box = document.querySelector('.box')
    var foods = "拉面 盖浇饭 炒饭 火锅 披萨 黄焖鸡米饭 牛排 包子 喷射战士 K记 麦当当 包子 下馆子 那个 西北风 饺子 过桥米线 老八秘制小憨包 烧烤 肉夹馍 土家酱香饼 炸鸡 饭团 沙拉 麻辣香锅 意面 锅贴 三明治 蛋糕 烤冷面 鸡公煲 闷锅 煲仔饭 方便面 混沌 汤圆 冒菜"
    var food = foods.split(' ')
    var desiginfoods = []
    var tests=[]
    var colors = ['#00BFFF', '#7FFF00', ' #FFFF00', '#FF69B4', '#DA70D6', '#B22222', '#000000', '#FFDEAD', '#C0FF3E', '	#8600FF', '	#2894FF','	#7B7B7B']
    function draw() {
        back.innerHTML = '';

       

        if (stop) {
            box.innerHTML = '吃什么捏'
        } else {
            content.innerHTML = food[parseInt(Math.random() * food.length)]
            box.innerHTML='吃这个'
        }

         for (var i = 0; i < tests.length; i++) {
             test = tests[i]
             var span = document.createElement('span')
             span.style.position = 'absolute'
             span.style.left = test.sx + 'px'
             span.style.top = test.sy + 'px'
             span.style.color = test.color
             span.style.fontSize = test.size + 'px'
             span.style.opacity = 1 - test.age / 100

             test.sy -= test.vx
             test.age++
             if (test.age > 100) {
                 tests.splice(i,1)
             }

             if (stop) {
                 span.innerHTML = content.innerHTML
             } else {
                 span.innerHTML = test.str
             }
             back.appendChild(span)

         } 

         if (tests.length < 30) {
             tests.push({
                 str: food[parseInt(Math.random() * food.length)],
                 sx: Math.random() * window.innerWidth,
                 sy: Math.random() * window.innerHeight,
                 color: colors[parseInt(Math.random() * colors.length)],
                 size: Math.random() * 20 + 20,
                 age: Math.random() * 100,
                 vx: Math.random() * 10

             })
         }
    }

    function alertInput() {
        var str = prompt('请输入想吃食物的名字（名字用空格隔开，输入完成后请点击吃什么捏');
        if (str) {

            desiginfoods=str.split(' '); 
            if (desiginfoods.length > 0) {
                food = []
                food = desiginfoods
                console.log(food)
            }

           }
        
    }
    console.log(desiginfoods)
    setInterval(draw, 50);
 

</script>



</html>